<template>
  <a-drawer
    width="50%"
    placement="right"
    :closable="true"
    :visible="addVisible"
    title="新增提汇"
    @close="onClose"
  >
    <a-form-model ref="FROM" :model="data" :rules="rules">
      <a-form-model-item label="货币代码" prop="currency">
        <a-input :value="data.currency" :disabled="true" size="large"></a-input>
      </a-form-model-item>
      <a-form-model-item label="代收账户" prop="nowBalance">
        <a-input :value="data.nowBalance" :disabled="true"></a-input>
      </a-form-model-item>
      <a-form-model-item label="提汇金额" prop="drawAmount">
        <a-input v-model:value="data.drawAmount"></a-input>
      </a-form-model-item>
      <a-form-model-item label="收款方式" prop="entryType">
        <a-select v-model:value="data.entryType" placeholder="请选择收款方式">
          <a-select-option
            :value="item.value"
            v-for="(item, index) in selectList"
            :key="index"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="收款账号" prop="accountNo">
        <a-input v-model:value="data.accountNo"></a-input>
      </a-form-model-item>
      <a-form-model-item label="谷歌验证码" prop="googleVerifyCode">
        <a-input v-model:value="data.googleVerifyCode"></a-input>
      </a-form-model-item>
      <a-form-model-item label="提汇备注" prop="drawDesc">
        <a-textarea
          v-model:value="data.drawDesc"
          placeholder="如果收款方式是银行卡，请输入银行卡相关内容"
        />
      </a-form-model-item>
    </a-form-model>
    <div class="drawer-btn-center">
      <a-button @click="onClose" style="margin-right: 10px"> 取消 </a-button>
      <a-button @click="addDateFun" type="primary"> 保存 </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
import { API_URL_MCH, req } from '@/api/manage'

export default {
  name: 'PayyMchAdddraw',
  props: {
    addDate: {
      type: Object,
      default: () => ({
        appId: '',
        currency: '',
        dayBalance: 0,
        isvNo: '',
        mchName: '',
        mchNo: '',
        nowBalance: 0,
        state: 0
      })
    },
    callbackFunc: { type: Function, default: () => () => ({}) }
  },
  watch: {
    addDate (val) {
      if (val) {
        this.data = val
        console.log(this.data)
      }
    }
  },
  data () {
    return {
      addVisible: false,
      rules: {
        drawAmount: [
          { required: true, trigger: 'blur', message: '请输入提汇资产' },
          {
            validator: (rule, value, callBack) => {
              value <= this.addDate.nowBalance
                ? callBack()
                : callBack('提汇资产 不能大于 当前总资产')
            }
          }
        ],
        entryType: [
          { required: true, trigger: 'blur', message: '请选择收款方式' }
        ],
        accountNo: [
          { required: true, trigger: 'blur', message: '请输入收款账号' }
        ],
        googleVerifyCode: [
          { required: true, trigger: 'blur', message: '请输入谷歌验证码' }
        ]
      },
      selectList: [
        {
          title: 'U_TRC20',
          value: 'TRC20'
        },
        {
          title: '银行卡',
          value: 'BANK_CARD'
        }
      ],
      data: {
        appId: '',
        currency: '',
        dayBalance: 0,
        isvNo: '',
        mchName: '',
        mchNo: '',
        nowBalance: 0,
        state: 0
      }
    }
  },
  mounted () {},
  methods: {
    onClose: function () {
      this.addVisible = false
      $emit(this, 'update:addDate', {})
    },
    show () {
      this.addVisible = true
    },
    addDateFun () {
      this.$refs.FROM.validate((valid) => {
        if (valid) {
          req
            .add(API_URL_MCH, { ...this.addDate })
            .then((res) => {
              this.$message.success('新增成功')
              this.addVisible = false
              this.callbackFunc() // 刷新列表
              this.onClose()
            })
            .catch((err) => {
              console.log(err, 'err')
            })
        }
      })
    }
  },
  emits: ['update:addDate']
}
</script>

<style lang="scss" scoped></style>
